@import './_mixins.scss';
@import './_vars.scss';

.tippy-iOS {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.tippy-popper {
    max-height: 100%;
    max-width: 100%;
    outline: 0;
    pointer-events: none;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: $z-index-dropdown;

    @each $placement in $placements {
        &[x-placement^='#{$placement}'] {
            .tippy-backdrop {
                border-radius: nth(
                    $backdrop-border-radii,
                    index($placements, $placement)
                );
            }

            .tippy-backdrop {
                transform-origin: nth(
                    $backdrop-origins,
                    index($placements, $placement)
                );

                &[data-state='visible'] {
                    @include backdrop-transform-enter($placement);
                }

                &[data-state='hidden'] {
                    @include backdrop-transform-leave($placement);
                    opacity: 0;
                }
            }

            [data-animation='fade'] {
                &[data-state='visible'] {
                    @include enter-transform($placement, 'fade');
                }

                &[data-state='hidden'] {
                    opacity: 0;
                    @include enter-transform($placement, 'fade');
                }
            }

            [data-animation='shift-away'] {
                &[data-state='visible'] {
                    @include enter-transform($placement, 'fade');
                }

                &[data-state='hidden'] {
                    opacity: 0;
                    @include leave-transform($placement, 'shift-away');
                }
            }

            [data-animation='scale'] {
                transform-origin: nth($origins, index($placements, $placement));

                &[data-state='visible'] {
                    @include enter-transform($placement, 'scale');
                }

                &[data-state='hidden'] {
                    opacity: 0;
                    @include leave-transform($placement, 'scale');
                }
            }
        }
    }
}

.tippy-tooltip {
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &[data-animatefill] {
        overflow: hidden;
        background-color: transparent;
    }

    &[data-interactive] {
        pointer-events: auto;

        path {
            pointer-events: auto;
        }
    }
}

.tippy-backdrop {
    position: absolute;
    border-radius: 50%;
    width: calc(110% + 2rem);
    left: 50%;
    top: 50%;
    z-index: -1;
    transition: all cubic-bezier(0.46, 0.1, 0.52, 0.98);
    backface-visibility: hidden;

    &::after {
        content: '';
        float: left;
        padding-top: 100%;
    }
}

.tippy-backdrop + .tippy-content {
    transition-property: opacity;
    will-change: opacity;

    &[data-state='visible'] {
        opacity: 1;
    }

    &[data-state='hidden'] {
        opacity: 0;
    }
}
